<template>
  <FormSelect
    :value="value"
    default-first-option
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    filterable
    v-bind="$attrs"
    allow-create
    @input="onInput">
    <ElOption v-for="item in members" :key="item.id" :label="item.name" :value="item"><i class="el-icon-user"></i> {{ item.name }}</ElOption>
  </FormSelect>
</template>

<script>
  import { findMember } from '@/module/tech-project/project-manage/member/api'
  import { isPlainObject } from '@web-utils/core'

  export default {
    name: 'InputProjectMember',
    props: {
      value: String
    },
    data() {
      return {
        loading: false,
        members: []
      }
    },
    methods: {
      onInput(value) {
        let name
        if (isPlainObject(value)) {
          name = value.name
          this.$emit('select', value)
        } else {
          name = value
        }
        this.$emit('input', name)
      },
      async remoteMethod(query) {
        if (query && query.length > 1) {
          this.loading = true
          const res = await findMember(query)
          this.members = res.data.data
          this.loading = false
        } else {
          this.members = []
        }
      }
    }
  }
</script>
